<template>
  <div>
    <Panel title="品牌列表">
      <div slot="body">
        <TableEncapsulation
          slot="body"
          ref="TableEncapsulation"
          :changeSelectRow="(ids) => multipleSelection = ids"
          :tableConfig="tableConfig"
          :tableData="tableData"
        >
          <Pager
            slot="pager"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </Pager>
        </TableEncapsulation>
      </div>
      <div slot="ext">
        <div :class="$style.extClass">
            <SearchInput
            placeholder="请输入品牌名称"
            label="品牌名称"
            style="margin-right:20px"
            :value="name"
            :onChange="(val) => name = val"
            :onBlur="queryData"
            />
            <el-button @click="setOnlie" size="mini">设置上线</el-button>
        </div>
      </div>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import Pager from "@/components/Pager";
import { mapState, mapGetters } from "vuex";
import { arrayToTree, baseUrl } from "@/utils/request.js";
import SearchInput from "@/components/SearchInput";

export default {
  components: {
    Panel,
    TableEncapsulation,
    Pager,
    SearchInput
  },
  data() {
    return {
      name: '',
      isSynchronization: undefined,
      visible: false,
      currentStoreId: 'c7a93953-399e-4e87-8944-32e2b2ebb81d',
      multipleSelection: [],
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      tableData: [],
      tableConfig: {
        selection: true,
        columnConfig: [
          {
            type: "text",
            prop: "name",
            label: "菜品名称",
            align: "center",
          },
          {
            type: "text",
            prop: "price",
            label: "价格",
            align: "center",
          },
          {
            type: "text",
            prop: "unit",
            label: "单位",
            align: "center",
          },
          {
            type: "other",
            prop: "isSetMeal",
            label: "是否套餐",
            align: "center",
            fnc: (val) => val?'是':'否'
          },
          {
            type: "other",
            prop: "isSynchronization",
            label: "是否同步到云端",
            align: "center",
            fnc: (val) => val?'是':'否'
          },
        //   {
        //     label: "是否上架",
        //     type: "switch",
        //     prop: "isSynchronization",
        //     align: "center",
        //     onChange:(val) => this.changeSrtate(val)
        //   },
        ]
      },
      functionList: [],
    };
  },
  computed: {
    ...mapGetters(['storeList']),
    baseUrl(){
      return baseUrl
    }
  },
  methods: {
    setOnlie(){
      if(this.multipleSelection.length!==1){
        this.$message.error('请选择一项')
        return
      }
      
      this.$router.push('/set-combo-online', )
    },
    async pageChange(val){
      this.pager.current = val
      this.queryData()
    },

    async queryData(){
      const {result, total} = await this.$store.dispatch({
        type: 'storeBusiness/getData',
        url: '/StoreBusiness/GetSetMealFooldInfoZyByPgae',
        params: {
            storeId: this.currentStoreId,
            name: this.name,
            isSynchronization: this.isSynchronization,
            index: this.pager.current,
            size: 10
        }
      })
      this.tableData = result
      this.$set(this.pager, 'total',total)      
    }
  },
  mounted() {},
  async created() {
    await this.$store.dispatch({
      type: "storeBusiness/getAllStoreList",
      classes: "query"
    });
    if(this.currentStoreId){
      this.queryData()
    }
  }
};
</script>
<style lang='scss' module>
.extClass{
  display: flex;
  align-items: center;

  :global{
    font-size: 14px;
    color: #666;
  }
}
.bannerDialog{
  :global{
    .avatar-uploader{
      text-align: center;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 150px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }
    .row{
      display: flex;
      align-items: center;
      margin: 20px 0;

      span{
        min-width: 80px;
        max-width: 80px;
      }
      .el-input-number{
        width: 220px;
      }
      .el-input__inner{
        width: 220px;
      }
    }
  }
}
</style>

